<template>
  <div class="flex">
    <div class="table" style="width: 100%">
      <Search :formState="formState" @searchData="onSearchList" />
      <a-card>
        <TableTools @onAddRecord="onAddRecord"></TableTools>
        <a-table
          :pagination="{
            pageSize: formState.pageSize,
            total: total,
            showTotal: (total) => `共${total}条记录`,
            size: 'middle',
          }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data-source="repositories"
          size="middle"
          :loading="tableLoading"
          @change="handleTableChange"
        >
          <template #operation="{ record }">
            <a-space>
              <a-button @click="onEdit(record)">编辑</a-button>
              <a-button @click="onDel(record.id)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-card>
      <a-modal
        width="800px"
        centered
        :visible="visible"
        :title="title"
        @cancel="handleCancel"
      >
        <component
          :is="currentModalComponent"
          :form="form"
          :validateInfos="validateInfos"
        ></component>
        <template #footer>
          <a-button key="back" @click="handleCancel">关闭</a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
            >确认</a-button
          >
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts">
import { TableStateFilters } from "ant-design-vue/es/table/interface";
import * as API from "@/api/data-file-insert";
import { SnippetsOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRefs, onMounted, computed } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import form, { resetFields, validate, validateInfos } from "./useForm";
import ModalAdd from "./components/modalAddForm.vue";
import Search from "./components/search.vue";
import TableTools from "./components/tableTools.vue";
import { message } from "ant-design-vue";
import { onHandleCode, tagColor } from "@/filter/index";
import { Item, FormState } from "./type";

// ref js基础数据类型 [] 、reactive引用类型 响应式
export default defineComponent({
  name: "dataFileInsert",
  setup() {
    const formState = reactive<FormState>({
      sjmc: "",
      pageSize: 10,
      pageNum: 1,
      orderByColumn: "",
      isAsc: "asc",
    });
    const columns = [
      {
        title: "数据名称",
        dataIndex: "sjmc",
        key: "sjmc",
      },
      { title: "数据提供商", dataIndex: "sjtgcs", key: "sjtgcs" },
      {
        title: "数据类型",
        dataIndex: "sjlx",
        key: "sjlx",
      },
      {
        title: "数据文件大小",
        key: "sjwjdx",
        dataIndex: "sjwjdx",
      },
      { title: "文件存放服务ip", dataIndex: "ip", key: "ip" },
      { title: "文件格式", dataIndex: "wjgs", key: "wjgs" },
      {
        title: "操作",
        key: "operation",
        slots: { customRender: "operation" },
      },
    ];
    const { total, repositories, getUserRepositories } =
      useRepositoryNameSearch(formState);
    onMounted(getUserRepositories);
    const store = reactive({
      currentModal: "add",
      tableLoading: false,
      loading: false,
      visible: false,
      title: "",
      type: 1,
      onSearchList: (formState: FormState) => {
        store.tableLoading = true;
        formState = formState;
        getUserRepositories().then(() => {
          store.tableLoading = false;
        });
      },
      handleTableChange: (
        pagination: any,
        filter: TableStateFilters,
        sorter: any
      ) => {
        store.tableLoading = true;
        formState.pageNum = pagination.current;
        if (sorter && sorter.order) {
          formState.isAsc = sorter.order === "ascend" ? "asc" : "desc";
          formState.orderByColumn = sorter.field;
        }
        getUserRepositories().then(() => {
          store.tableLoading = false;
        });
      },
      onDel: (ids: string) => {
        API.delListApi(ids).then(({ msg }: any) => {
          getUserRepositories();
          message.success(msg);
        });
      },
      onEdit: (record: Item) => {
        Object.keys(record).forEach((e) => {
          form[e] = record[e];
        });
        store.visible = true;
        store.title = "编辑记录";
        store.type = 2;
        store.currentModal = "add";
      },
      onAddRecord(bool: boolean) {
        store.visible = bool;
        store.title = "新增记录";
        store.type = 1;
        store.currentModal = "add";
      },
      handleOk() {
        store.type === 1
          ? validate().then(() => {
              API.addListApi(form).then(({ msg }: any) => {
                getUserRepositories();
                message.success(msg);
                store.visible = false;
                resetFields();
              });
            })
          : API.editListApi(form).then(({ msg }: any) => {
              getUserRepositories();
              message.success(msg);
              store.visible = false;
            });
      },
      handleCancel() {
        resetFields();
        store.loading = false;
        store.visible = false;
      },
    });

    const currentModalComponent = computed(() => {
      return `modal-${store.currentModal}`;
    });

    return {
      form,
      total,
      formState,
      repositories,
      columns,
      tagColor,
      onHandleCode,
      validateInfos,
      ...toRefs(store),
      currentModalComponent,
    };
  },
  components: {
    Search,
    ModalAdd,
    TableTools,
    SnippetsOutlined,
  },
});
</script>
